<template>
  <main id="home" class="view">
    <md-cell-item
      class="cell"
      :title="title"
      arrow
      @click="isPickerShow0 = true"
    />
    <div class="dataArea">
      <div class="dataRow">
        <div class="rowItem" style="margin-right: 0.2rem">
          <div class="title">体温</div>
          <div class="num">
            {{ baseData.temp || 0 }}<span style="font-size: 0.28rem">femp</span>
          </div>
        </div>
        <div class="rowItem" style="background: #800080">
          <div class="title">心率</div>
          <div class="num">
            {{ baseData.rate || 0 }}<span style="font-size: 0.28rem">bpm</span>
          </div>
        </div>
      </div>
      <div class="dataRow">
        <div class="rowItem" style="margin-right: 0.2rem; background: #67c23a">
          <div class="title">步数</div>
          <div class="num">
            {{ baseData.step || 0 }}<span style="font-size: 0.28rem">step</span>
          </div>
        </div>
        <div class="rowItem" style="background: #f56c6c">
          <div class="title">距离</div>
          <div class="num">
            {{ baseData.distance || 0
            }}<span style="font-size: 0.28rem">km</span>
          </div>
        </div>
      </div>
    </div>
    <div class="tip">最近上报时间：{{ baseData.createTime }}</div>
    <div class="titleR">心电图</div>
    <md-chart
      :size="['7rem', '4rem']"
      :max="1000"
      :lines="5"
      :format="format"
      :datasets="[
        {
          color: '#5e64ff',
          width: 1,
          theme: 'heat',
          values: this.list,
        },
      ]"
    />
    <md-picker
      ref="picker0"
      v-model="isPickerShow0"
      :data="pickerData0"
      large-radius
      @confirm="onPickerConfirm(0)"
      title="选择数据源"
    ></md-picker>
  </main>
</template>

<script>
import {
  Button,
  Toast,
  Amount,
  InputItem,
  Popup,
  Chart,
  CellItem,
  Picker,
} from "mand-mobile";
import simple from "mand-mobile/components/picker/demo/data/simple";
import { getHeartBeat, getBaseData } from "../../api/heartBeat";

let stateTime = null;
let heartBeatTime = null;

export default {
  name: "heartBeat",
  data() {
    return {
      baseData: {},
      list: [0],
      id: 1,
      title: "数据源1",
      currentData: [],
      sourceData: [],
      pickerData0: [],
      isPickerShow0: false,
    };
  },
  components: {
    [Picker.name]: Picker,
    [Chart.name]: Chart,
    [Button.name]: Button,
    [Amount.name]: Amount,
    [Popup.name]: Popup,
    [InputItem.name]: InputItem,
    [CellItem.name]: CellItem,
  },
  methods: {
    format(val) {
      return val;
    },
    onPickerConfirm(index) {
      const values = this.$refs[`picker${index}`].getColumnValues();
      this.currentData = values;
      this.id = this.currentData[0].value;
      this.title = this.currentData[0].text;
      console.log(this.currentData[0].value);
      clearInterval(stateTime);
      clearInterval(heartBeatTime);
      this.pollingState();
      this.pollingHeartBeat();
    },
    onClick(e) {
      console.log("11212");
      this.isPickerShow0 = true;
    },
    getBaseData() {
      let self = this;
      getBaseData({ id: this.id }).then((res) => {
        let req = res.data;
        if (req.code == 0) {
          self.baseData = req.data;
        }
      });
    },
    getHeartBeat() {
      let self = this;
      getHeartBeat({ id: this.id }).then((res) => {
        let req = res.data;
        if (req.code == 0 && req.rows.length > 0) {
          self.list = req.rows;
          console.log(self.list);
        }
      });
    },
    pollingState() {
      let self = this;
      self.getBaseData();
      stateTime = window.setInterval(() => {
        self.getBaseData();
      }, 10000);
    },
    pollingHeartBeat() {
      let self = this;
      self.getHeartBeat();
      heartBeatTime = window.setInterval(() => {
        self.getHeartBeat();
      }, 10000);
    },
  },
  beforeDestroy() {
    clearInterval(stateTime);
    clearInterval(heartBeatTime);
  },
  created() {
    let self = this;
    self.sourceData = [];
    for (let i = 0; i < 20; i++) {
      self.sourceData.push({ text: `数据源${i + 1}`, value: i + 1 });
    }
    self.pickerData0 = [this.sourceData];
    console.log(this.sourceData);
  },
  mounted() {
    clearInterval(stateTime);
    clearInterval(heartBeatTime);
    this.pollingState();
    this.pollingHeartBeat();
  },
};
</script>

<style lang="stylus" scoped>
.view {
  position: relative;
  overflow-y: auto;
  text-align: left;
  box-sizing: border-box;
  min-height: 100vh;
  padding: 0.3rem;

  .cell {
    background: #f5f5f5;
    padding: 0 0.2rem;
    border-radius: 0.16rem;
    margin-bottom: 0.4rem;
  }

  .titleR {
    font-size: 0.48rem;
    font-weight: bold;
    margin-bottom: 0.3rem;
  }

  .tip {
    font-size: 0.32rem;
    color: #b2b2b2;
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
  }

  .dataRow {
    display: flex;
    align-items: center;
    justify-content: center;

    .rowItem {
      flex: 1;
      text-align: center;
      background: #409EFF;
      color: #fff;
      border-radius: 0.12rem;
      margin-bottom: 0.16rem;
      padding: 0.3rem;
    }

    .num {
      font-size: 0.6rem;
      margin-top: 0.2rem;
    }
  }

  .dataArea {
    font-size: 0.32rem;
  }
}
</style>
